<template>

  <div class="wscn-http404-container">
    <div style="margin-top: 15%">
      <span style="font-size: 30px;font-weight: 800"  class="bounce">
        <span style="color: #d78884;font-family: Arial" class="letter">
          您
        </span>
        <span style="color: #d75666;font-family: 'MV Boli'" class="letter">
          的
        </span>
        <span style="color: #d7259b;font-family: MV Boli" class="letter">
          登
        </span>
        <span style="color: #d716d5;font-family: MV Boli" class="letter">
          陆
        </span>
        <span style="color: #d70d6c;font-family: MV Boli" class="letter">
          信
        </span>
        <span style="color: #d72d42;font-family: MV Boli" class="letter">
          息
        </span>
        <span style="color: #d75d36;font-family: MV Boli" class="letter">
          已
        </span>
        <span style="color: #d71e39;font-family: 'MV Boli'" class="letter">
          过
        </span>
        <span style="color: #d7a411;font-family: 'MV Boli'" class="letter">
          期
        </span>
        <span style="color: #d7a411;font-family: '华文彩云'" class="letter">
          ，
        </span>
        <span style="color: #6cd7c6;font-family: 'Segoe UI Symbol'" class="letter">
          请
        </span>
        <span style="color: #319ad7;font-family: 'Segoe UI Symbol'" class="letter">
          返
        </span>
        <span style="color: #9a8bd7;font-family: 'Segoe UI Symbol'" class="letter">
          回
        </span>
        <span style="color: #b135d7;font-family: 'Segoe UI Symbol'" class="letter">
          oa
        </span>
        <span style="color: #d75d7f;font-family: Segoe UI Symbol" class="letter">
          系
        </span>
        <span style="color: #2cd74e;font-family: 'Segoe UI Symbol'" class="letter">
          统
        </span>
        <span style="color: #58d7a2;font-family: 'Segoe UI Symbol'" class="letter">
          重
        </span>
        <span style="color: #7bb1d7;font-family: Segoe UI Symbol" class="letter">
          新
        </span>
        <span style="color: #2c60d7;font-family: 'Segoe UI Symbol'" class="letter">
          进
        </span>
        <span style="color: #d73f77;font-family: Segoe UI Symbol" class="letter">
          入
        </span>
      </span>
    </div>


    <a href="">
      <span style="color: #ffffff;float: right;margin-top: 4%;margin-right: 5%" @click="callBackOa">点击返回oa系统</span>
    </a>
  </div>
</template>

<script>
  import * as userinfo from '@/api/userinfo'
  export default {
    name: 'Fanhuioa',
    computed: {
      message() {
        return 'The webmaster said that you can not enter this page...'
      }
    },
    methods:{
      callBackOa(){
        const appName = process.env.VUE_APP_APP_NAME
        userinfo.userLogin().then((response) => {
          console.log('response',response)
        }).catch ((error)=>{
          console.log(error)
        })

      }

    }
  }
</script>

<style lang="scss" scoped>
  .wscn-http404-container {
    width: 50%;
    height: 35%;
    position: absolute;
    top: 30%;
    left: 25%;
    background-color: #2b3453;
    border-radius: 20px;
  }





  .bounce {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font: normal bold 0.5rem "Product Sans", sans-serif;
    white-space: nowrap;
  }

  .letter {
    animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
    display: inline-block;
    transform: translate3d(0, 0, 0);
    margin-top: 0.5em;
    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
    font: normal 500 2rem 'Varela Round', sans-serif;
  }
  .letter:nth-child(1) {
    animation-delay: 0s;
  }
  .letter:nth-child(2) {
    animation-delay: 0.1s;
  }
  .letter:nth-child(3) {
    animation-delay: 0.2s;
  }
  .letter:nth-child(4) {
    animation-delay: 0.3s;
  }
  .letter:nth-child(5) {
    animation-delay: 0.4s;
  }
  .letter:nth-child(6) {
    animation-delay: 0.5s;
  }
  .letter:nth-child(6) {
    animation-delay: 0.6s;
  }
  .letter:nth-child(7) {
    animation-delay: 0.7s;
  }
  .letter:nth-child(8) {
    animation-delay: 0.8s;
  }
  .letter:nth-child(9) {
    animation-delay: 0.9s;
  }
  .letter:nth-child(10) {
    animation-delay: 1.0s;
  }  .letter:nth-child(11) {
    animation-delay: 1.1s;
  }  .letter:nth-child(12) {
    animation-delay: 1.2s;
  } .letter:nth-child(13) {
    animation-delay: 1.3s;
  }.letter:nth-child(14) {
    animation-delay: 1.4s;
  }.letter:nth-child(15) {
    animation-delay: 1.5s;
  }.letter:nth-child(16) {
     animation-delay: 1.6s;
   }.letter:nth-child(17) {
     animation-delay: 1.7s;
   }.letter:nth-child(18) {
     animation-delay: 1.8s;
   }.letter:nth-child(19) {
     animation-delay: 1.9s;
   }.letter:nth-child(20) {
     animation-delay: 2.0s;
   }.letter:nth-child(21) {
     animation-delay: 2.1s;
   }.letter:nth-child(22) {
     animation-delay: 2.2s;
   }.letter:nth-child(23) {
     animation-delay: 2.3s;
   }.letter:nth-child(24) {
     animation-delay: 2.4s;
   }.letter:nth-child(25) {
     animation-delay: 2.5s;
   }


  @keyframes bounce {
    0% {
      transform: translate3d(0, 0, 0);
      text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
    }
    100% {
      transform: translate3d(0, -1em, 0);
      text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
    }
  }


</style>
